<template>
    <div class="userInfo padding-top-60 padding-left-40">
        <h2>{{title}}</h2>
        <div class="margin-top-40 padding-left-20">
            <span>未实名验证</span>
            <i class="el-icon-arrow-right margin-left-10"></i>
        </div>
        <el-container class="text-center">      
          <el-form :model='form' :rules='rules' label-width="100px" hide-required-asterisk  ref='form' class='form'>
            <el-row >
                <el-col :span=24>
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>               
            </el-row> 
             <el-row >
                <el-col :span=24>
                    <el-form-item label="证件类型" class="text-left">                     
                         <el-select v-model="form.type" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                                </el-option>
                            </el-select>

                    </el-form-item>
                </el-col>
            </el-row> 
            <el-row >
                <el-col :span=24>
                    <el-form-item label="证件号码">
                        <el-input v-model="form.cardNum"></el-input>
                    </el-form-item>
                </el-col>
            </el-row> 
            <el-row >
                <el-col :span=24>
                    <el-form-item label="银行卡号">
                        <el-input v-model="form.BankNum"></el-input>
                    </el-form-item>
                </el-col>               
            </el-row> 
             <el-row >
                <el-col :span=24>
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row> 
            <el-row >
                <el-col :span=24>
                    <el-form-item label="验证码" prop="verifyCode">
                        <el-input  prefix-icon="el-icon-user"  v-model="form.verifyCode"  placeholder="发送短信验证码">              
                            <el-button slot="append"
                                v-if="!countDown"                                              
                                @click.prevent="getVerify()"
                                >
                                获取验证码
                                </el-button>
                                <el-button slot="append"
                                v-else
                                disabled="disabled"
                                >
                                已发送({{countDown}}s)
                                </el-button>
                        </el-input>
                    </el-form-item> 
                </el-col>
            </el-row>
           
             <el-form-item label="" >             
              <el-link type="success" @click="doRealAuth()" :underline="false">保存</el-link>     
            </el-form-item> 
          </el-form>
        </el-container>


    </div>
</template>

<script>
import {getVerifyCode,realAuth} from './../../ajax/index'
import {regPhone} from './../../assets/js/rule'
export default {
    name:'Authentication',
    data() {
        return {       
            title:'实名认证 ',
            options: [{
                value: 'identitycard',
                label: '身份证'
                }, {
                value: 'passport',
                label: '护照',
                //disabled: true
                }],
            countDown:0,
            form: {
                name:'',
                type:'identitycard',
                cardNum:'',
                phone:'',              
                BankNum:'',
                verifyCode:'',        
            },
            rules: {
                name:[],
                type:[],
                phone:[],
                cardNum:[],
                BankNum:[],
                verifyCode:[]
            }
            
        }
    },
    methods: {
        async getVerify(){
           if (regPhone(this.form.phone)) {
                this.countDown = 60;
                this.intervalId = setInterval(() => {
                    this.countDown--;
                    if (this.countDown === 0) {
                    clearInterval(this.intervalId);
                    }
                }, 1000);
            }else{
                this.$message({
                        message: '请输入正确的手机号',
                        type: 'error',
                        duration:2000,               
                    });
                    return false;
                }
            const param = {
                'phoneNum': this.form.phone
            }
            let result = await getVerifyCode(param);
            if(result.code === '200' && result.data.state === '1'){
                    this.form.verifyCode = result.data.data;
                    console.log(this.form.verifyCode);
                }else{
                    alert(result.data.message);
            }
        },
        async doRealAuth(){
            var param = {
                'name':this.form.name,
                'certificationType': this.form.type,
                'certificationNumber':this.form.cardNum,
                'phone':this.form.phone,
                'bankcardNumber': this.form.BankNum,
                'verificationCode': this.form.verifyCode
            }
            var result = await realAuth(param);
            console.log(result);
            if(result.code === '200' && result.data.state === '1'){ 
                alert('绑卡成功！');
                this.$router.push({path:'/home'})
            }else{
                alert(result.data.message);
            }
        }


    }
}
</script>

<style lang="less">
 .form{
    width: 800px;
    margin: 20px auto 0px;
    .el-form-item .el-form-item__label{
        color: #000!important;
        font-size:14px;
    }
    input:focus{
      outline:none;
    }
    a{
    
      cursor: pointer;
    }
    .el-divider--horizontal{
      margin-bottom:5px;
    }
    .el-button{
      width: 200px;
    }
  }
</style>
